<template>
    <div class="headComponent" v-if="oItem">
      <div class="item">
        <div class="left">页面标题</div>
        <div class="right">
          <el-input placeholder="请输入标题内容" v-model="oItem.title" :maxlength="50" @input="titleInputChange" clearable>
          </el-input>
        </div>
      </div>
      <div class="item">
        <div class="left">页面名称</div>
        <div class="right">
          <el-input placeholder="请输入标题名称" v-model="oItem.pageName" :maxlength="50" @input="pageNameInputChange" clearable>
          </el-input>
        </div>
      </div>

      <div class="item">
        <div class="left">页面背景颜色</div>
        <div class="right">
          
        </div>
      </div>

      <div class="item">
        <div class="left">页面背景图片</div>
        <div class="right">
          
        </div>
      </div>

      <colorComponent :item="{
        ename: 'pageBgColor',
        id: oItem.id,
        title: '页面背景颜色',
        value: oItem.pageBgColor,
        'default': oItem.pageBgColor
      }" :id="oItem.id" @updateParent="updateParent('color')"></colorComponent>
      <chooseImageComponent :item="{
        ename: 'pageBgImg',
        id: oItem.id,
        title: '页面背景图片'
      }" :id="oItem.id" @updateParent="updateParent('image')"></chooseImageComponent>
    </div>
</template>
<script>
    import Bus from "@/utils/bus";
export default {
    name: "headComponent",
    data() {
        return {
          pageName: "页面头部组件",
          oItem: null
        }
    },
    created() {},
    props: ["item"],
    components: {
      colorComponent: () => import("@/pages/decorate/right/components/lone/colorComponent.vue"),
      chooseImageComponent: () => import("@/pages/decorate/right/components/lone/chooseImageComponent.vue"),
    },
    mounted() {
      if (this.item) {
        this.oItem = this.item;
      }
    },
    methods: {
      //选择背景颜色和背景图片的回调事件
      updateParent(){

      },
      //监听输入标题的事件
      titleInputChange(){
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if(row.id === this.oItem.id) {
            row.title = this.oItem.title;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          title: this.oItem.title
        })
      },
      //监听输入页面名称的事件
      pageNameInputChange(){
        let setFormContent = JSON.parse(localStorage.getItem("setFormContent"));
        setFormContent.forEach(row => {
          if(row.id === this.oItem.id) {
            row.pageName = this.oItem.pageName;
          }
        })
        localStorage.setItem("setFormContent", JSON.stringify(setFormContent));
        Bus.$emit(`${this.item.ename}${this.item.id}`, {
          pageName: this.oItem.pageName
        })
      },
    },
    computed: {},
    watch: {},
}
</script>
<style scoped lang="scss">
.headComponent{
  .item{
    display: flex; align-items: center; margin-bottom:20px;
    .left{width:30%;display: flex; justify-content: flex-end;padding-right: 10px;box-sizing: border-box;font-size: 14px;color:#888;}
  }
}
</style>
